<template>
  <div>
    <Tou></Tou>
    <template>
      <el-carousel indicator-position="none" height="600px">
        <el-carousel-item>
          <img src="https://www.12306.cn/index/images/pic/banner-login-20200629.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://www.12306.cn/index/images/pic/banner-login-20200924.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </template>
    <img src="../img/foot.png">
    <div class="denglu">
      <template>
        <el-tabs value="first" type="card">
          <el-tab-pane label="账号登录" name="first">
            <el-input v-model="user.userName" placeholder="用户名/邮箱/手机号" prefix-icon="el-icon-user-solid"
                      style="width: 300px;margin-top: 50px"></el-input>
            <el-input v-model="user.userPass" type="password" placeholder="密码" prefix-icon="el-icon-lock" style="width: 300px;margin-top: 20px"></el-input>
            <el-button round style="margin-top: 20px; background-color: #F58100;color: white;width: 300px;"
            @click="login"
            >立即登录
            </el-button>
            <div>
              <router-link to="/zhuce" style="font-size: 14px;color:#3b99fc;">注册12306账号</router-link>
              |
              <span style="font-size: 14px;color:#aaa;margin-left: 5px">忘记密码?</span>
              <hr>
              <span style="font-size: 12px;color:#aaa; margin: 15px">铁路12306每日5:00至次日1:00（周二为5:00至23:30）提供购票、改签、变更到站业务办理， 全天均可办理退票等其他服务。</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="扫码登录" name="second">
            <img style="width: 150px; margin-top: 20px"
                 src=""
                 alt="">
            <div style="margin-top: 20px">
              <span>打开<span style="color: #3b99fc;font-size: 12px;">12306手机APP</span> 扫描二维码</span>
            </div>
            <div style="margin-top: 20px">
              <router-link to="/zhuce" style="color: #3b99fc;font-size: 12px; ">注册12306账号</router-link>
            </div>
            <img src="../img/p1.png">
          </el-tab-pane>
        </el-tabs>
      </template>

    </div>
  </div>
</template>

<script>
import Tou from "./tou.vue";
export default {
  name: "login",
  components: {Tou},
  data() {
    return {
      user:{
        userName:'',
        userPass:'',
      },
    }
  },
  methods:{
    login(){
      this.$axios.post('/user/login',this.user)
        .then(res=>{
          if (res.data.code==200){
            const username = this.user.userName; // 这是登录后的用户名
            // 存储令牌和有效期为30分钟
            const tokenExpirationTime = 30 * 60 * 1000; // 30分钟的毫秒数
            localStorage.setItem("token",res.data.data)
            localStorage.setItem("tokenExpires", Date.now() + tokenExpirationTime);
            this.$router.push('/');
          }
        }).catch(res=>{
        this.$message.error('用户名或密码错误');
      })
    },
  }
}
</script>

<style scoped>
.sou {
  margin-top: 25px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.denglu {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 150px;
  right: 300px;
  background-color: #fff;
  z-index: 9;
}
</style>
